//绑定手机号
<template>
    <div class="bind-phone">
        <!-- 更换 绑定手机号 -->
        <div v-if="isBindPhone">

            <!-- <b-alert class="alert-tips" show variant="danger">{{$t('u_sjyzjwndzhdlbh')}}</b-alert> -->

            <div>

                <b-row>
                    <b-col lg="5" md="5" sm="6" class="input-item">
                        <div class="item-name"></div>
                        <div>
                            <span style="color:#ccc">{{$t('u_ndsjh')}}:</span>
                            <span>{{userNameTransform(mobile)}}</span>
                        </div>
                    </b-col>
                </b-row>

                <b-row>
                    <b-col lg="5" md="5" sm="6" class="input-item">
                        <div class="item-name">{{$t('u_sjh')}}</div>
                        <b-input v-model="phone" class="item-val" :placeholder="$t('u_jysycysjh')"></b-input>
                        <div class="tips-line" v-if="existsPhone" :style="{color:'red'}">{{$t('u_gsjhybdqtzh')}}</div>
                    </b-col>

                </b-row>

                <!-- 短信验证码 -->
                <b-row>
                    <b-col lg="5" md="5" sm="6" class="input-item">
                        <div class="item-name">{{$t('u_dxyzm')}}</div>
                        <b-input v-model="mgsCode" class="item-val" :placeholder="$t('u_qslyzm')"></b-input>
                        <b-button @click="currentGetPhoneCode" :disabled="ifDisabled" class="phone-code" variant="outline-secondary">{{btnText}}</b-button>
                    </b-col>
                </b-row>

                <b-row>
                    <b-col lg="5" md="5" sm="6" class="input-item">
                        <div class="item-name"></div>
                        <b-button class="submit-btn" @click="userBindPhoneChange" :disabled="bindOne" variant="success">{{$t('u_ghsjh')}}</b-button>
                    </b-col>
                </b-row>

            </div>

        </div>

        <!-- 绑定手机号 -->
        <div v-else>

            <b-alert class="alert-tips" show variant="danger">{{$t('u_sjyzjwndzhdlbh')}}</b-alert>

            <div>

                <b-row>
                    <b-col lg="5" md="5" sm="6" class="input-item">
                        <div class="item-name">{{$t('u_sjh')}}</div>
                        <b-input v-model="phone" class="item-val" :placeholder="$t('u_jysycysjh')"></b-input>
                        <div class="tips-line" v-if="existsPhone" :style="{color:'red'}">{{$t('u_gsjhybd')}}</div>
                    </b-col>

                </b-row>

                <!-- 短信验证码 -->
                <b-row>
                    <b-col lg="5" md="5" sm="6" class="input-item">
                        <div class="item-name">{{$t('u_dxyzm')}}</div>
                        <b-input v-model="mgsCode" class="item-val" :placeholder="$t('u_qslyzm')"></b-input>
                        <b-button @click="currentGetPhoneCode" :disabled="ifDisabled" class="phone-code" variant="outline-secondary">{{btnText}}</b-button>
                    </b-col>
                </b-row>

                <b-row>
                    <b-col lg="5" md="5" sm="6" class="input-item">
                        <div class="item-name"></div>
                        <b-button class="submit-btn" @click="userBindPhone" :disabled="bindOne" variant="success">{{$t('u_qysjyzgn')}}</b-button>
                    </b-col>
                </b-row>

            </div>

        </div>

    </div>
</template>

<script>
import { isPhoneNum, userNameTransform } from "../../assets/js/common";
import { mapActions, mapState } from "vuex";
import mixins from "../../assets/js/mixin";
export default {
  mixins: [mixins],
  data() {
    return {
      phone: null,
      ifDisabled: false,
      btnText: this.$t("u_hqyzm"),
      timer: null,
      mgsCode: "", // 用户输入验证码
      bindOne: false, //避免重复提交
      existsPhone: false,
      mobile: ""
    };
  },
  methods: {
    userNameTransform,
    currentGetPhoneCode() {
      // 获取验证码
      if (this.phone == "") {
        // 请填写手机号
        this.$swal(this.$t("u_qtxsjh"),{
          icon:'/static/img/tan_chuang.png'
        });
        return false;
      }
      if (!isPhoneNum(this.phone)) {
        this.$swal(this.$t("u_qtxzqdsjh"),{
          icon:'/static/img/tan_chuang.png'
        });
        return false;
      }
      if (this.existsPhone) {
        return false;
      }
      this.getPhoneCode(this.phone).then(res => {
        if (res.data.code == "001") {
          this.countdown();
        }
      });
    },
    userBindPhone() {
      // 绑定手机号
      if (!isPhoneNum(this.phone)) {
        //请填写正确的手机号
        this.$swal(this.$t("u_qtxzqdsjh"),{
          icon:'/static/img/tan_chuang.png'
        });
        return false;
      }
      if (this.mgsCode == "") {
        this.$swal(this.$t("u_qtxyzm"),{
          icon:'/static/img/tan_chuang.png'
        });
        return false;
      }
      this.bindOne = true;
      this.$http
        .post("/nb-web/api/user/bind/phone", {
          mobile: this.phone,
          mgsCode: this.mgsCode
        })
        .then(res => {
          this.bindOne = false;
          if (res.data.code == "001") {
            this.$swal({
              title: "",
              text: res.data.msg,
              icon: '/static/img/tan_chuang.png'
            }).then(value => {
              this.phone = "";
              this.mgsCode = "";
              this.accountTabActiveChange(0); //跳转到我的账户信息页面
              this.isBindPhoneChange(true); //成功绑定手机
              this.gotoRoute("/user/account/account_msg");
            });
          } else {
            this.$swal(res.data.msg,{
              icon:'/static/img/tan_chuang.png'
            });
          }
        });
    },
    userBindPhoneChange() {
      // 更改 绑定手机号
      if (!isPhoneNum(this.phone)) {
        //请填写正确的手机号
        this.$swal(this.$t("u_qtxzqdsjh"),{
          icon:'/static/img/tan_chuang.png'
        });
        return false;
      }
      if (this.mgsCode == "") {
        this.$swal(this.$t("u_qtxyzm"),{
          icon:'/static/img/tan_chuang.png'
        });
        return false;
      }
      this.bindOne = true;
      this.$http
        .post("/nb-web/api/user/new/phone", {
          newMobile: this.phone,
          mgsCode: this.mgsCode
        })
        .then(res => {
          this.bindOne = false;
          if (res.data.code == "001") {
            this.$swal({
              title: "",
              text: res.data.msg,
              icon: '/static/img/tan_chuang.png'
            }).then(value => {
              window.location.reload();
            });
          } else {
            this.$swal(res.data.msg,{
              icon:'/static/img/tan_chuang.png'
            });
          }
        });
    },
    currentExists() {
      // 验证用户是否绑定手机号
      this.$http
        .post("/nb-web/api/user/phone/exists", {
          account: this.$cookie.getCookie("account").replace(/\"/g, "")
        })
        .then(res => {
          if (res.data.code == "001") {
            if (res.data.result.data.mobile) {
              //   this.gotoRoute('/user');
              this.mobile = res.data.result.data.mobile;
              this.isBindPhoneChange(true);
            } else {
              this.isBindPhoneChange(false); // 未绑定手机号
            }
          } else {
            this.isBindPhoneChange(false); // 未绑定手机号
          }
        });
    },
    ...mapActions(["accountTabActiveChange", "isBindPhoneChange"])
  },
  computed: {
    ...mapState(["isBindPhone"])
  },
  created() {
    this.currentExists();
    this.accountTabActiveChange(1);
  },
  watch: {
    phone(newval) {
      this.existsPhone = false;
      if (isPhoneNum(newval)) {
        this.$http
          .post("/nb-web/api/user/exists", {
            account: newval
          })
          .then(res => {
            if (res.data.code == "001") {
              this.existsPhone = true; // 已绑定手机号
            } else {
              this.existsPhone = false; // 未绑定手机号
            }
          });
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../assets/style/common.scss";

.bind-phone {
  min-height: 600px;
  padding-top: 30px;
  .alert-tips {
    font-size: 12px;
  }
  .input-item {
    position: relative;
    .tips-line {
      position: absolute;
      font-size: 12px;
      bottom: -5px;
      left: 100px;
    }
  }
}
</style>


